<!-- 全局页面 -->
<template>
  <div class="manage_page">
    <div class="left">
      <el-menu
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        style="min-height: 100vh; "
        mode="vertical"
        background-color="#304156"
        text-color="#fff"
        active-text-color="#409eff"
        :collapse="isCollapse"
        unique-opened
        router
      >
        <el-menu-item index="manage">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu
          :index="indexs + ''"
          v-for="(item, indexs) of menus"
          :key="indexs"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <div v-for="(items, indexone) of item.child" :key="indexone">
            <div v-if="items.child == undefined">
              <el-menu-item :index="items.path">{{ items.name }}</el-menu-item>
            </div>
            <div v-else>
              <el-submenu :index="indexs + '-' + indexone">
                <template slot="title">{{ items.name }}</template>
                <el-menu-item
                  :index="three.path"
                  v-for="(three, indextwo) of items.child"
                  :key="indextwo"
                  >{{ three.name }}</el-menu-item
                >
              </el-submenu>
            </div>
          </div>
        </el-submenu>
      </el-menu>
    </div>
    <div class="right">
      <head-top :tags="tags" @isCollapse="up"></head-top>
      <keep-alive v-if="isReloadData">
        <router-view />
      </keep-alive>
    </div>
    <!-- 全局返回浮窗 -->
    <div class="but" @click="back()" v-if="this.$route.meta.back">
      <el-tooltip
        class="item"
        effect="dark"
        content="后退一步"
        placement="bottom"
      >
        <el-button style="background: rgb(24, 144, 255);">
          <i class="el-icon-top-left"></i>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import headTop from "../components/headTop";
export default {
  data() {
    return {
      isCollapse: false, //点击折叠版面
      isImg: false,
      tags: [
        {
          text: "首页",
          path: "/manage",
          type: "success"
        }
      ], //历史导航数据
      menus: JSON.parse(localStorage.getItem("menus")),
      // menus: [
      //   {
      //     name: "设置",
      //     path: "",
      //     icon: "el-icon-s-tools",
      //     child: [
      //       {
      //         name: "菜单管理",
      //         path: "",
      //         icon: "",
      //         child: [
      //           {
      //             name: "菜单列表",
      //             path: "menulist",
      //             icon: ""
      //           }
      //         ]
      //       },
      //       {
      //         name: "管理员",
      //         path: "",
      //         icon: "",
      //         child: [
      //           {
      //             name: "角色列表",
      //             path: "rolelist",
      //             icon: ""
      //           },
      //           {
      //             name: "账号列表",
      //             path: "userlist",
      //             icon: ""
      //           }
      //         ]
      //       },
      //       {
      //         name: "编辑设置",
      //         path: "redactset",
      //         icon: ""
      //       }
      //     ]
      //   },
      //   {
      //     name: "会员",
      //     path: "",
      //     icon: "el-icon-star-on",
      //     child: [
      //       {
      //         name: "会员列表",
      //         path: "viplist",
      //         icon: ""
      //       }
      //     ]
      //   },
      //   {
      //     name: "审核",
      //     path: "",
      //     icon: "el-icon-s-check",
      //     child: [
      //       {
      //         name: "审核列表",
      //         path: "/auditlist",
      //         icon: ""
      //       }
      //     ]
      //   },
      //   {
      //     name: "订单",
      //     path: "",
      //     icon: "el-icon-s-order",
      //     child: [
      //       {
      //         name: "订单列表",
      //         path: "/orderlist",
      //         icon: ""
      //       }
      //     ]
      //   },
      //   {
      //     name: "直播间课程管理",
      //     path: "",
      //     icon: "el-icon-folder-opened",
      //     child: [
      //       {
      //         name: "课程分类",
      //         path: "courseclassifylist",
      //         icon: ""
      //       },
      //       {
      //         name: "课程管理",
      //         path: "course_list",
      //         icon: ""
      //       },
      //       {
      //         name: "直播间管理",
      //         path: "live_list",
      //         icon: ""
      //       }
      //     ]
      //   },
      //   {
      //     name: "视频管理",
      //     path: "",
      //     icon: "el-icon-money",
      //     child: [
      //       {
      //         name: "视频列表",
      //         path: "videolist",
      //         icon: ""
      //       }
      //     ]
      //   },
      //   {
      //     name: "幻灯片管理",
      //     path: "",
      //     icon: "el-icon-bangzhu",
      //     child: [
      //       {
      //         name: "幻灯片列表",
      //         path: "slidelist",
      //         icon: ""
      //       }
      //     ]
      //   },
      //   {
      //     name: "公告管理",
      //     path: "",
      //     icon: "el-icon-message-solid",
      //     child: [
      //       {
      //         name: "公告列表",
      //         path: "announcementlist",
      //         icon: ""
      //       }
      //     ]
      //   },
      //   {
      //     name: "文章管理",
      //     path: "",
      //     icon: "el-icon-message-solid",
      //     child: [
      //       {
      //         name: "文章列表",
      //         path: "essaylist",
      //         icon: ""
      //       },
      //       {
      //         name: "文章分类列表",
      //         path: "articlelist",
      //         icon: ""
      //       }
      //     ]
      //   }
      // ],
      isReloadData: true //点击取消刷新当前页面
    };
  },
  computed: {
    defaultActive: function() {
      return this.$route.path.replace("/", "");
    },
    clientWidth() {
      return this.$store.getters.cwidth; //当前页面宽度
    },
  },
  components: {
    headTop
  },
  //暴露父页面的方法
  provide() {
    return {
      reload: this.reload
    };
  },
  methods: {
    //历史导航
    getPath() {
      if (this.tags.indexOf(this.$route.meta.nav) == -1) {
        //判断当前数据是否存在改导航
        if (this.$route.meta.nav != undefined) {
          if (this.$route.meta.nav.text != "/") {
            this.tags.forEach(e => {
              e.type = "";
            });
            this.$route.meta.nav.type = "success";
            this.tags.push(this.$route.meta.nav); //改变当前导航状态
          }
        } else {
          this.tags.forEach(e => {
            e.type = "";
          });
          this.tags[0].type = "success"; //首页状态
        }
      } else {
        if (this.$route.meta.nav != undefined) {
          //如果数据中存在，强制删除替换当前数据中的值
          this.tags.forEach(e => {
            e.type = "";
          });
          this.$route.meta.nav.type = "success";
          let index = this.tags.indexOf(this.$route.meta.nav);
          this.tags.splice(index, 1, this.$route.meta.nav);
        }
      }
    },
    back() {
      this.$router.go(-1);
    },
    //刷新事件
    reload() {
      this.isReloadData = false;
      this.$nextTick(() => {
        this.isReloadData = true;
      });
    },
    // 接受子页面伸缩菜单
    up(data) {
      this.isCollapse = data.isCollapse;
    }
  },
  created() {
    //获取左边菜单数据
  },
  mounted() {
    //监听页面宽度
    window.onresize = () => {
      this.$store.commit("Gwidth", document.body.clientWidth);
    };
  },
  beforeUpdate() {},
  watch: {
    //监听路由，生成历史导航
    $route: "getPath",
    clientWidth(newval) {
      //监听页面宽度
      if (newval <= 958) {
        this.isCollapse = true;
        setTimeout(() => {
          this.isImg = true;
        }, 200);
      } else {
        this.isCollapse = false;
        setTimeout(() => {
          this.isImg = false;
        }, 200);
      }
    },
    menu(newval) {
      if (newval) {
        this.menus = newval;
      }
    }
  }
};
</script>


<style scoped>
.manage_page {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
/* .but:hover {
  width: 2%;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(24, 144, 255);
  position: fixed;
  top: 30vh;
  right: 0px;
} */
.but {
  width: 2%;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(24, 144, 255);
  position: fixed;
  top: 30vh;
  right: 0px;
}
.but i {
  font-size: 180%;
  color: #fff;
}
.left {
  position: relative;
}
.right {
  flex: 1;
}
.left .el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.left .el-submenu .el-menu-item[data-v-3b23997f] {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 100%;
  background: #1f2d3d !important;
}
.left .el-submenu .el-menu-item:hover {
  background-color: #001528 !important;
}
/* 设置历史导航滚动条样式 */
.nav::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 2px;
}
.nav::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.nav::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.history {
  display: block;
  font-size: 180%;
}
</style>
